<template>
    <div class="demo-collapse" >
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="解题思路" name="thinking">
                <div>
                    <div>
                        通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另外一部分的所有数据都要小，
                        然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。
                    </div>
                    <div>快速排序算法通过多次比较和交换来实现排序，其排序流程如下：</div>
                    <div>
                        1、首先设定一个分界值，通过该分界值将数组分成左右两部分。
                    </div>
                    <div>
                        2、将大于或等于分界值的数据集中到数组右边，小于分界值的数据集中到数组的左边。
                        此时，左边部分中各元素都小于或等于分界值，而右边部分中各元素都大于或等于分界值。
                    </div>
                    <div>
                        3、然后，左边和右边的数据可以独立排序。对于左侧的数组数据，又可以取一个分界值，
                        将该部分数据分成左右两部分，同样在左边放置较小值，右边放置较大值。右侧的数组数据也可以做类似处理。
                    </div>
                    <div>
                        4、重复上述过程，可以看出，这是一个递归定义。通过递归将左侧部分排好序后，再递归排好右侧部分的顺序。
                        当左、右两个部分各数据排序完成后，整个数组的排序也就完成了。
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="代码实现" name="code">
                <!-- <el-image style="width:100%" :src="url" :fit="fit" loading="lazy"></el-image> -->
                <div v-highlight>
                    <div>C/C++:</div>
                    <pre class="language-javascript">
                      <code>
                        void QuickSort(int array[], int low, int high) {
                            int i = low; 
                            int j = high;
                            if(i >= j) {
                                return;
                            }
                         
                            int temp = array[low];
                            while(i != j) {
                                while(array[j] >= temp && i &lt; j) {
                                    j--;
                                }
                            while(array[i] &lt;= temp && i &lt; j) {
                                    i++;
                                }
                            if(i &lt; j) {
                                    swap(array[i], array[j]);
                                }
                            }
                         
                            //将基准temp放于自己的位置，（第i个位置）
                            swap(array[low], array[i]);
                            QuickSort(array, low, i - 1);
                            QuickSort(array, i + 1, high);
                        }  
                      </code>
                    </pre>
                </div>
                <div v-highlight>
                    <div>Python:</div>
                    <pre class="language-javascript">
                        <code>
                            def swap(arr, i, j):
                                arr[i], arr[j] = arr[j], arr[i]
 
                            def partition(arr, left, right):
                                pivot = left
                                index = pivot+1
                                i = index
                                while i&lt;=right:
                                    if arr[i]&lt;arr[pivot]:
                                        swap(arr, i, index)
                                        index+=1
                                    i+=1
                                swap(arr, pivot, index-1)
                                return index-1
 
                            def quickSort(arr, left=None, right=None):
                                left = 0 if not isinstance(left, (int, float)) else left
                                right = len(arr)-1 if not isinstance(right, (int, float)) else right
 
                                if left &lt; right:
                                    partitionIndex = partition(arr, left, right)
                                    quickSort(arr, left, partitionIndex-1)
                                    quickSort(arr, partitionIndex+1, right)
                                return arr
                        </code>
                    </pre>
                </div>
                <div v-highlight>
                    <div>Java:</div>
                    <pre class="language-javascript">
                      <code>
                        public static int[] qsort(int arr[],int start,int end) {        
                            int pivot = arr[start];        
                            int i = start;        
                            int j = end;        
                            while (i&lt;j) {            
                                while ((i&lt;j)&&(arr[j]>pivot)) {                
                                    j--;            
                                }            
                                while ((i&lt;j)&&(arr[i]&lt;pivot)) {                
                                    i++;            
                                }            
                                if ((arr[i]==arr[j])&&(i&lt;j)) {                
                                    i++;            
                                } else {                
                                    int temp = arr[i];                
                                    arr[i] = arr[j];                
                                    arr[j] = temp;            
                                }        
                            }        
                            if (i-1>start) arr=qsort(arr,start,i-1);        
                            if (j+1&lt;end) arr=qsort(arr,j+1,end);        
                            return (arr);    
                        }   
                      </code>
                    </pre>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// const url='../assets/code/汉诺塔.png'
const activeNames = ref(['thinking'])
const handleChange = (val: string[]) => {
    console.log(val)
}
// 代码实现部分
import "vue-code-highlight/themes/prism-solarizedlight.css";
import "vue-code-highlight/themes/window.css";

</script>
